<template>
  <div class="departments">
    <div class="departments_title">Departments</div>
    <div class="box">
      <div class="departments_card csp"
           v-for="(item,index) in departments"
           @mouseenter="move(index)"
           @mouseleave="move(-1)"
           :key="index"
           :class="isindex==index?'active':''">
        <div class="departments_font">{{ item.name }}</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      isindex: -1,
      departments: [
        { 'name': 'Oncology', 'img_url': '/images/disease/oncology.png', 'img_url2': '/images/disease/oncology2.png', 'path': '' },
        { 'name': 'Hematology', 'img_url': '/images/disease/hematology.png', 'img_url2': '/images/disease/hematology2.png', 'path': '' },
        { 'name': 'Rheumatology', 'img_url': '/images/disease/rheumatology.png', 'img_url2': '/images/disease/rheumatology2.png', 'path': '' },
        { 'name': 'Hepatology', 'img_url': '/images/disease/hepatology.png', 'img_url2': '/images/disease/hepatology2.png', 'path': '' },
        { 'name': 'Endocrinology', 'img_url': '/images/disease/endocrinology.png', 'img_url2': '/images/disease/endocrinology2.png', 'path': '' },
        { 'name': 'Pneumology', 'img_url': '/images/disease/pneumology.png', 'img_url2': '/images/disease/pneumology2.png', 'path': '' },
        { 'name': 'Neurology', 'img_url': '/images/disease/neurology.png', 'img_url2': '/images/disease/neurology2.png', 'path': '' },
        { 'name': 'Cardiology', 'img_url': '/images/disease/cardiology.png', 'img_url2': '/images/disease/cardiology2.png', 'path': '' },
        { 'name': 'Gastroenterology', 'img_url': '/images/disease/gastroenterology.png', 'img_url2': '/images/disease/gastroenterology2.png', 'path': '' },
        { 'name': 'Dermatology', 'img_url': '/images/disease/dermatology.png', 'img_url2': '/images/disease/dermatology2.png', 'path': '' }
      ],
    }
  },
  methods: {
    move (index) {
      this.isindex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  margin-top: 40px;
  .departments_title {
    font-weight: bold;
    font-size: 24px;
    color: #0041a3;
    line-height: 52px;
  }
  .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .departments_card {
      width: 160px;

      display: flex;
      justify-content: flex-start;
      padding: 16px 0;
      align-items: center;
      border-bottom: 1px solid #e5e8eb;
      .departments_img {
        width: 28px;
        height: 28px;
      }
      .departments_font {
        font-weight: 400;
        font-size: 16px;
        color: #2e343e;
        line-height: 18px;
        margin-left: 10px;
      }
    }
    .active {
      border-bottom: 1px solid #0041a3 !important;
      .departments_font {
        font-weight: 800;
        font-size: 16px;
        color: #0041a3;
        line-height: 18px;
        margin-left: 10px;
      }
    }
  }
}
</style>